<template>
  <div class="registerCon">
    <div class="imgWrap ">
      <img class="img1" src="../../assets/static-union_164793255107785e.png" alt="">
    </div>
    <div class="formWrap">
      <van-form class="loginForm" label-width="60px" label-align="right">
        <van-cell-group>
          <van-field v-model="regiUseInfo.phone" name="手机号" label="手机号" placeholder="请输入手机号" :rules="[{pattern:/^1(3[0-9]|4[57]|5[0-35-9]|6[67]|7[236-8]|8[0-35-9])\d{8}$/,message:'请输入正确的手机号'}]" style="margin-left:-5px" />

          <van-field v-model="regiUseInfo.code" name="验证码" label="验证码" clearable placeholder="请输入短信验证码" :rules="[{pattern:/^\d{6}$/,message:'请输入正确的验证码'}]">
            <template #button>
              <input type="button" value="发送验证码" @click="getCodeNum" />
            </template>
          </van-field>

          <van-field v-model="regiUseInfo.password" type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{pattern:/^[A-Za-z0-9_%#@.]{6,8}$/,message:'输入密码格式不正确'}]" style="margin-left:-5px" />
          <van-field v-model="regiUseInfo.rePassword" type="password" name="确认密码" label="确认密码" placeholder="请再次确认密码" :rules="[{validator :validatorMessage , message: '请填写用户名' }]" style="margin-left:-5px" />
        </van-cell-group>
        <div class="text" style="padding:20px">
          <span class="one">遇到问题？</span>
          <span @click="toLogin">已有账号直接登录</span>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="danger" :disabled="!regiUseInfo.isAgree" @click="submitResData">
            注册
          </van-button>
        </div>
        <div class="input1">
          <input type="checkbox" v-model="regiUseInfo.isAgree">
          <span>同意《网易严选服务协议》</span>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'register'
};
</script>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getCode, postRegister } from '../../api/api2/login';
import { Notify } from 'vant';
const router = useRouter();
const regiUseInfo = ref({
  phone: '',
  code: '',
  password: '',
  rePassword: '',
  isAgree: false
});
// console.log(regiUseInfo);
const toLogin = () => {
  router.push('/login');
};

const getCodeNum = async (e: any) => {
  // console.log(e);
  if (!regiUseInfo.value.phone) return alert('请输入手机号');

  let num = 6;
  e.target.disabled = true;
  const id = setInterval(() => {
    num--;
    e.target.value = num + '秒后重新获取';
    if (num === 0) {
      // console.log(e.target);
      clearInterval(id);
      e.target.value = '获取验证码';

      e.target.disabled = false;
      return;
    }
  }, 1000);

  const result: any = await getCode(regiUseInfo.value.phone);
  // console.log(result);
  regiUseInfo.value.code = result;
  // console.log(regiUseInfo);
  Notify({ type: 'success', message: `验证码为：${result}` });
};
// 校验有问题
const validatorMessage = (val: any) => {
  if (regiUseInfo.value.password) {
    // console.log(regiUseInfo.value.password);
    // console.log(val);
    if (regiUseInfo.value.password !== val) {
      return '两次输入密码不一致';
    }
  }
};
const submitResData = async () => {
  const result = await postRegister(regiUseInfo.value);
  router.push('/login');
};
</script>

<style lang="less">
.registerCon {
  .imgWrap {
    width: 375px;
    height: 45px;
    margin-top: 28px;
    text-align: center;

    .img1 {
      height: 45px;
      width: 134px;
    }
  }
  .formWrap {
    width: 375px;
    height: 330px;
    margin-top: 20px;
    .text {
      width: 335px;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      font-size: 12px;
      .one {
        color: #aaa;
      }
    }
    .input1 {
      padding: 20px;
      font-size: 12px;
    }
  }
}
</style>